INKA STORY TEMPLATE

Getting Started

Theme Info

Created: 07/01/2019

Inka Story is a simple premium Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean, and has been built by using some of the most popular current design trends.

Features

  • Responsive Design Check
  • Google Testing Tool Validator (Structured Data) Check
  • Adsense Ready
  • Magazine Style
  • Custom Threaded Comment
  • 2 Column
  • Gray Base Theme Color
  • Responsive Ad
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Share Button
  • Navigation Menu
  • Nav Dropdown Menu
  • Footer Menu
  • Numbered Page Navigation
  • Sidebar
  • Custom 404 Page
  • Smooth back To Top Button
  • Custom Contact Form Design
  • Subscribe Box
  • And more..

Installation

  • 1. Log in to your Blogger dashboard and go to Layout > Edit HTML.
  • 2. Please back up your old template in case you decide to use it again. To do this, click on the "download full template" link and save the file.
  • 3. Then, browse the location of XML template that you've just downloaded and press "upload".

    • Customize Theme

    First Go to Blogger > Layout > Top Menu > "Edit"

    Find below code and change all # with yours link.

    Top Navigation : 
    <li class='homemenu'><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Lifestyle</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Travel</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Error 404</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Submenu 4</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 4 item</span></a></li>
</ul></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Submenu 5</span></a></li>
</ul>
</li>
    Add menu :

    add this code

    <li><a href='#' itemprop='url'><span itemprop='name'>Menu Name</span></a></li>
    Add sub menu :

    add this code

    <li>
<a href='#' itemprop='url'><span itemprop='name'>Submenu</span></a>

<ul>
<li><a href='Your LINK' itemprop='url'><span itemprop='name'>Sub Submenu 4</span></a></li>
</ul>

</li>
    Footer Menu: 
    <li><a href='/p/about-us.html' title='About Us'>About Us</a></li>
<li><a href='/p/contact.html' title='Contact'>Contact Us</a></li>
<li><a href='/p/sitemap.html' title='Our Sitemap'>Sitemap</a></li>
<li><a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='/p/terms-of-service.html' title='Terms of Service'>Terms of Service</a></li>

    Featured Post

    First Go to Blogger > Layout > Featured Post > "Edit"

    Change -/Break with your label.

    If you want use 'recent post' . Delete -/Break and save.. 

    <script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/-/Break?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>

    Mag Style

    Mag Section Type :
    1. Post by Label-Myar,
    2. myLabel Tab,
    3. Post Label Grid (Label Left and Label Right)

    Note : Post by Label-Myar. This widget is locked and cannot be deleted.

    But if you want to delete it, you can go to > Template > Edit HTML > and find code below, and delete.

    <div id='newsmartpiklabel1-wrapper'>
.
.
.
.
.
</div>
    Post by Label-Myar

    Change Label.

    Layout > Post by Label-Myar > "Edit". and change Romance with your label

    Romance
    myLabel Tab

    Layout > myLabel Tab > "Edit". and change "Break","Lifestyle","Fashion" with 3 your label

    <div class='recent-labpost' data-label='["Break","Lifestyle","Fashion"]'/></div>
    Post Label Grid (Label Left and Label Right)

    Label position left and right it's same

    Layout > Label Left / Label Right, > "Edit". and change Travel with your label name

    <script src="/feeds/posts/default/-/Travel?max-results=3&amp;alt=json-in-script&amp;callback=myargrid"></script>

    Post Page

    Adsense

    First Go to Blogger > Template > "Edit HTML"

    Find the text <!-- Place Your Ads Here (Already Parsed) --> and replace with your adsense code

    Before without adsense code

    <div style="display:block;text-align:center;margin:0 auto;">
      <!-- Place Your Ads Here (Already Parsed) -->
      </div>

    After with adsense code

    <div style="display:block;text-align:center;margin:0 auto;">
	  <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-596xxxxxxxxxxxxx"
     data-ad-slot="420xxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

    Example : 

    <!-- adsense -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla venenatis odio, a consequat massa blandit ac.
Mauris ornare sapien in neque venenatis, ac fermentum tortor scelerisque. Integer sed ultricies magna, vitae gravida eros.
Etiam sapien massa, facilisis et semper in, sollicitudin ut turpis.Donec ac mauris dignissim, pretium enim non, vulputate est. Aliquam ut elementum enim, a vestibulum ipsum. Sed fringilla ac erat ut vulputate. Curabitur scelerisque, ligula non pretium venenatis, diam tortor sagittis mi, at malesuada risus leo nec est. Phasellus eleifend, purus a porttitor egestas, orci est porttitor ligula, et consequat diam tellus sed dolor. Aenean eu semper mauris, ut egestas nibh.
<!-- adsense -->

    Widgets

    Contact Form

    Add New Page for Static Page > Copy and paste all below code in it (HTML Mode). FYI : After adding this code, make sure you do not move to Compose mode.

    Find Blog ID 114265898521855835 and change all with your Blog ID

    and Find URL Blog //myar-inka.blogspot.com/ and change all with your URL Blog

    Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px;background:transparent;border:none;box-shadow:none;}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '114265898521855835';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d114265898521855835','//myar-inka.blogspot.com/','114265898521855835');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '114265898521855835', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
    Sitemap

    Add New Page for Static Page > Copy and paste all below code in it (HTML Mode).

    Find URL Blog https://myar-inka.blogspot.com and change all with your URL Blog

    <p>
<div id='show-cat'></div><div id='show-post'><script type='text/javaScript'>
var cat_home='https://myar-inka.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script><br />
</div><style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>
</p>
    Ad Banner HTML

    Add New widget > Copy and paste all below code in it.

    Find # and change with your link

    Find IMAGE-URL and change with your URL Image

    Find ADS-DESCRIPTION and change with your description ads

    Banner 728x90.

    <div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='90' src='IMAGE-URL' title='ADS-DESCRIPTION' width='728'/></a>
</div>

    Banner 125x125.

    <div class="kotak_iklan">
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
</div>
    Subscribe Box

    Layout > Subscribe Box > "Edit.

    Change InkaStory with your feedbnurner link name.

    InkaStory

    Recent Post

    Layout > add HTML/JS

    add code below and save.

    <script style='text/javascript' src='https://cdn.staticaly.com/gh/myabdurrahim/js/ff7660d5/recentpostmyar.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfomyar'></script>

    ShortCodes

    Drop Caps 
    <span class="first-letter">Your First Letter here</span>
    Blockquote

    To create a Blockquote simply select all text you want to be a Quote and click on Quote icon from blog post text editor panel.

    Bullet and List

    To create a Bullet simply select all text you want to be a Bullet and click on Bullet List icon from blog post text editor panel.
    To create a Ordered List simply select all text you want to be a Ordered List and click on Numbered List icon from blog post text editor panel.

    Buttons

    Add the demo and download button.

      <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
    Shortcodes with Demo

    To see other shortcodes, with demo. You can go this Link.

    https://myar-inka.blogspot.com/2019/01/documentation-for-make-articles.html

    Fixed

    Mobile Responsive

    To provide responsive look better on a mobile device, please click Template > Gear > Select None. Show mobile template on mobile devices.

    Okay thats it, have fun and enjoy.


    www.myabdurrahim.com

    Top